/*
 * @(#) SelectBody.js
 *
 * <br> Copyright:  Copyright (c) 2017
 * <br>
 * <br> @author caijinhuang
 * <br> 2017-12-06 22:25:12
 */

import React  from 'react';
import '../../../css/select.css'
import $ from 'jquery';
import ReactDOM from 'react-dom';
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 该模块需要传入三个参数：
 *  listCell:候选成员列表
 *  option:选择操作
 *  selectedList:已经选中的成员列表
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
class SelectBody extends React.Component{
    constructor(props){
        super(props);
        this.state={
            selectedNow:[],//当前选中的成员
            memberListComponent:[],
            data:this.props.listCell,//可选单元
        }
    }

    /**
     * 获取最终选中的成员列表
     * @returns {Array}
     */
    getList(){
        this.state.selectedNow = [];
        var iDom =  this.refs.selected;
        for(let i=0;i<iDom.options.length;i++){
            this.state.selectedNow.push({userId:iDom.options[i].value,name:iDom.options[i].text});
        }
        return this.state.selectedNow;
    }

    componentWillMount(){
        console.log(this.state.data);
        this.state.memberListComponent = [];
        let data = this.state.data;
        let selected = this.props.option();
        if(this.props.remain === "true") {
            /*成员列表列表*/
            console.log("=============")
            console.log(selected);
            for(let i=0;i<data.length;i++){
                if(!selected.every((value,index)=>{return data[i].userId !== value.userId})){
                    if(data[i].roleName!=="super_admin"){
                        this.state.memberListComponent.push(<option value={data[i].userId} key={data[i].userId}>{data[i].nickname}</option>)
                    }
                }
            }
        }else{
            /*成员列表列表*/
            for(let i=0;i<data.length;i++){
                if(selected.every((value,index)=>{return data[i].userId !== value.userId})){
                    if(data[i].roleName!=="super_admin") {
                        this.state.memberListComponent.push(<option value={data[i].userId} key={data[i].userId}>{data[i].nickname}</option>)
                    }
                }
            }
        }

    }

    componentDidMount(){

        $("#add").bind("click",function(){
            if(!$("#select1 option").is(":selected"))
            {
                alert("选择项为空");
            }
            $("#select1 option:selected").appendTo("#select2");
        });

        $("#remove").bind("click",function(){
            if(!$("#select2 option").is(":selected"))
            {
                alert("选择项为空");
            }
            $("#select2 option:selected").appendTo("#select1");
        });

        $("#add_all").bind("click",function(){
            $("#select1 option").appendTo("#select2");
        });

        $("#remove_all").bind("click",function(){
            $("#select2 option").appendTo("#select1");
        });

        $("#select1").bind("dblclick",function(){
            $("#select1 option:selected").appendTo("#select2");
        })

        $("#select2").bind("dblclick",function(){
            $("#select2 option:selected").appendTo("#select1");
        })
    }

    render(){
        return (
            <div className="row select-body">

                <div className="span2">
                    <select multiple="multiple" id="select1" className="select-left">
                        {this.state.memberListComponent}
                    </select>
                </div>
                <div className="span2">
                    <div className="btn-bar">
                        <p><span id="add"><input type="button" className="btn" value=">" title="移动选择项到右侧"/></span></p>
                        <p><span id="add_all"><input type="button" className="btn" value=">>" title="全部移到右侧"/></span></p>
                        <p><span id="remove"><input type="button" className="btn" value="<" title="移动选择项到左侧"/></span></p>
                        <p><span id="remove_all"><input type="button" className="btn" value="<<" title="全部移到左侧"/></span></p>
                    </div>
                </div>
                <div className="span2">
                    <select multiple="multiple" id="select2" className="select-right" ref="selected">
                    </select>
                </div>
            </div>
        );
    }
}
export default SelectBody